﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Item</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="itemdetail.css" rel="stylesheet" />
    <script src="itemdetail.js"></script>
</head>
<body>
    <!-- Images List Template -->

    <div id="imagesListTemplate" 
         data-win-control="WinJS.Binding.Template">
        <div class="imagesListItem">
            <div data-win-control="WinJS.UI.ViewBox">
                <img class="imageListImage" 
                     data-win-bind="src: Path" />
            </div>
        </div>
    </div>

    <div id="imagesListBigTemplate" 
         data-win-control="WinJS.Binding.Template">
        <div class="imagesListBigItem">
            <div data-win-control="WinJS.UI.ViewBox">
                <img class="imageListImage" 
                     data-win-bind="src: Path" />
            </div>
        </div>
    </div>

    <div class="itemdetail fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="win-scrollview">
                <article>
                    <!-- Basic -->
                    <div class="itemBasicArea">
                        <div class="itemDescriptionArea">
                            <div class="itemIconArea">
                                <div data-win-control="WinJS.UI.ViewBox">
                                    <img class="itemIcon" src="#" alt="#" onerror="this.src='../../images/no-pic.png'" />
                                </div>
                            </div>
                            <h2 class="itemDescription"></h2>
                        </div>
                        <div class="itemDownloadArea">
                            <button class="itemDownloadButton">
                                Clique para Baixar
                            </button>
                        </div>
                    </div>

                    <!-- Details -->
                    <div class="itemDetailArea">
                        <div>
                            <h2 class="itemLicenseText">
                                Gratuito para testar
                            </h2>
                            <h3 class="itemDownloadsLabel">
                                downloads
                            </h3>
                            <h2 class="itemDownloadsText">
                                0
                            </h2>
                            <h3 class="itemRatingLabel">
                                0 votos
                            </h3>
                            <div class="itemRating" data-win-control="WinJS.UI.Rating" 
                                 data-win-options="{averageRating:3,disabled:true}">
                            </div>
                        </div>
                        <div>
                            <h4 class="itemLanguageText">
                                Português
                            </h4>
                            <h4 class="itemSizeText">
                               0 KB
                            </h4>
                            <h4 class="itemUpdateText">
                                Atualizado em 
                            </h4>
                            <h4 class="itemPublisherText">
                               
                            </h4>
                        </div>
                    </div>

                    <!-- Images -->
                    <div class="itemImagesArea">
                        
                        <!-- Images List -->
                        <div id="imagesList" 
                                data-win-control="WinJS.UI.ListView" 
                                data-win-options="{ layout: { type: WinJS.UI.GridLayout },
                                                    itemTemplate: select('#imagesListTemplate'), 
                                                    selectionMode: 'none',
                                                    pagesToLoad : 1,
                                                    automaticallyLoadPages: false}"></div>

                    </div>

                    <!-- Pros and Cons -->
                    <div class="itemProsConsArea">
                        <h3 class="prosTitle">Prós</h3>
                        <ul id="prosList" class="prosConsList">
                            <li></li>
                        </ul>
                        <h3 class="consTitle">Contras</h3>
                        <ul id="consList" class="prosConsList">
                            <li></li>
                        </ul>
                    </div>

                    <!-- Opinion -->
                    <div class="itemOpinionArea">
                        <div>
                            <h2>Nossa Opinião</h2>
                            <div class="itemOpinionText">
                                <p></p>
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="itemFullArea">
                        <div>
                            <h2>Descrição</h2>
                            <div class="itemFullText">
                            
                            </div>
                        </div>
                    </div>

                </article>
            </div>
        </section>
    </div>
</body>
</html>
